<template>
  <div>
    <el-skeleton :loading="loading" animated>
      <template slot="template">
        <el-skeleton-item variant="button" class="serverBox"/>
        <el-skeleton-item variant="button" class="serverBox"/>
      </template>
      <template>
        <el-card shadow="hover" v-for="server in Servers" :key="server.ip">
          <el-descriptions :title="server.ip" :column="1" border
                           v-loading="!server.enable"
                           element-loading-text="等待此服务器开启"
                           :labelStyle="{'width': '50px'}"
          >
            <template slot="extra">
              <el-button type="primary" plain icon="el-icon-link"
                         @click="changeThisServer(Servers.indexOf(server))">切换
              </el-button>
            </template>
            <el-descriptions-item>
              <template slot="label">
                机器地址
              </template>
              {{ server.ip }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                队列长度
              </template>
              {{ server.sendQueue.length }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                发送总量
              </template>
              <el-tag v-if="server.sendQueue[0]">
                {{ server.sendQueue[0].list.length }}
              </el-tag>
              <el-tag type="info" v-else>
                -
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                现已发送
              </template>
              <el-tag v-if="server.sendQueue[0]">
                {{
                  server.sendQueue[0].mailSendStatus ? server.sendQueue[0].mailSendStatus.mailSucceed + server.sendQueue[0].mailSendStatus.mailFail : 0
                }}
              </el-tag>
              <el-tag type="info" v-else>
                -
              </el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template slot="label">
                发送进度
              </template>
              <el-progress
                  v-if="server.sendQueue[0]"
                  :percentage="compPercentage(server.sendQueue[0].mailSendStatus)">
              </el-progress>
              <el-tag type="info" v-else>
                暂无队列
              </el-tag>
            </el-descriptions-item>
          </el-descriptions>
        </el-card>
      </template>
    </el-skeleton>
  </div>
</template>

<script>
import {mapGetters, mapMutations} from "vuex";
import {Message} from "element-ui";

export default {
  name: "ServersList",
  data() {
    return {}
  }, methods: {
    //计算进度
    compPercentage(status) {
      if (status) {
        //如果正在发送,但成功数量和失败数量都为0就会导致计算无意义报错
        if (status.flag) {
          return 100;
        } else if (status.count > 0) {
          return Number(((status.mailSucceed + status.mailFail) / status.count * 100).toFixed(2));
        }
      }
      return 0;
    },
    changeThisServer(index) {
      this.$confirm('确定更换服务器吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.Servers.indexOf(this.currentServer) === index) {
          Message.warning('当前已经是该服务器,无法进行更换!');
          return;
        }
        this.changeServer(index);
        Message.success('已更换');
      }).catch(() => {
        Message.info('已取消更换');
      });
    },
    ...mapMutations({changeServer: 'server/changeServer'})
  }, computed: {
    ...mapGetters({
      loading: 'getLoading',
      Servers: 'server/getServers',
      currentServer: 'server/getCurrentServer'
    })
  }
}
</script>

<style scoped>
.serverBox {
  width: 100%;
  height: 220px;
}

.serverBox + .serverBox {
  margin-top: 10px;
}

.el-card + .el-card {
  margin-top: 10px;
}
</style>